<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Submits</title>
  <!-- <link rel="stylesheet" type="text/css" href="/lib/semantic-ui/semantic.min.css" /> -->
  <link href="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.min.css" rel="stylesheet">
  <!-- <script src="/lib/jquery-3.2.1.min.js"></script> -->
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <!-- <script src="/lib/semantic-ui/semantic.min.js"></script> -->
  <script src="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.min.js"></script>
  <!-- <script src="/lib/vue.js"></script> -->
  <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
  <!-- <script src="/lib/axios.min.js"></script> -->
  <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
  <script src="/js/util.js"></script>
  <script src="/js/components.js"></script>
</head>

<body>
  <script src="/lib/moment-with-locales.min.js"></script>
  <script>
    moment().format();
    moment.locale('zh-cn');
  </script>

  <div id="app">
    <my-header v-bind:userinfo='userinfo'></my-header>


    <template v-if='!loading'>
      <div class="ui main container">
        <h1 class="ui header" style="color:transparent">UI</h1>
        <h1 class="ui header">提交</h1>
        <div class="ui fluid icon input">
          <input type="text" placeholder="根据学号或者题目编号搜索" />
          <i class="search icon"></i>
        </div>
        <table class="ui celled striped table">
          <thead>
            <tr>
              <th class="one wide">提交</th>
              <th class="two wide">学号/工号</th>
              <th class="one wide">问题</th>
              <th class="three wide">状态</th>
              <th class="one wide">内存</th>
              <th class="one wide">耗时</th>
              <th class="one wide">语言</th>
              <th class="one wide">长度</th>
              <th class="five wide">提交时间</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in list">
              <td> {{item.id}} </td>
              <td>
                <a>{{item.userId}}</a>
              </td>
              <td>
                <a :href="'/problem/'+item.problemId">{{item.problemId}}</a>
              </td>
              <td>
                <button v-if="item.judged===-1" v-on:click='checkOut(item.id)' class="ui compact basic loading button">正在判题</button>
                <button v-if="item.judged===0" v-on:click='checkOut(item.id)' class="ui compact green button">答案正确</button>
                <button v-if="item.judged===1" v-on:click='checkOut(item.id)' class="ui compact red button">答案错误</button>
                <button v-if="item.judged===2" v-on:click='checkOut(item.id)' class="ui compact yellow button">时间超限</button>
                <button v-if="item.judged===3" v-on:click='checkOut(item.id)' class="ui compact yellow button">输出超限</button>
                <button v-if="item.judged===4" v-on:click='checkOut(item.id)' class="ui compact yellow button">内存超限</button>
                <button v-if="item.judged===5" v-on:click='checkOut(item.id)' class="ui compact yellow button">运行时错误</button>
                <button v-if="item.judged===6" v-on:click='checkOut(item.id)' class="ui compact red button">格式错误</button>
                <button v-if="item.judged===7" v-on:click='checkOut(item.id)' class="ui compact yellow button">编译错误</button>
                <button v-if="item.judged===8" v-on:click='checkOut(item.id)' class="ui compact yellow button">系统错误</button>
              </td>
              <td>{{ (item.memoryUsed/1000).toFixed(2) }}M</td>
              <td>{{ item.timeUsed }}ms</td>
              <td>{{ item.lang}} </td>
              <td>{{ item.length }}b</td>
              <td>
                <span v-bind:title="fmt0(item.createTime)">{{ fmt(item.createTime) }}</span>
              </td>
            </tr>

          </tbody>
        </table>



        <!-- <my-pager></my-pager> -->

      </div>
    </template>

    <view-loader v-if='loading'></view-loader>


    <auth-modal v-bind:errorinfo='errorinfo'></auth-modal>
    <my-footer></my-footer>
  </div>


  <script>
    (function () {
      var ld = {
        list: [],
        loading: true,
        userinfo: {},
        errorinfo: {
          type: 0,
          msg: ''
        }
      };


      axios.get('/api/u/info', {
        headers: { 'Access-Token': window.localStorage.getItem('token') }
      })
        .then(function (response) {
          ld.userinfo = response.data.data
        })
        .catch(function (error) {
          if (/50\d/.test(error.response.status)) {
            ld.errorinfo.type = 500;
          } else {
            ld.errorinfo.type = 400;
            ld.errorinfo.msg = error.response.data.msg;
          }
          $('.ui.basic.modal').modal('show');
          $(":root").delay(3000).queue(function () {
            $('.ui.basic.modal').modal('hide');
            window.location.href = "/login";
          });
        })



      axios.get('/api/s', {
        headers: { 'Access-Token': window.localStorage.getItem("token") }
      })
        .then(function (response) {
          ld.list = response.data.data;
          ld.list.reverse();
          ld.loading = false;
        })
        .catch(function (error) {
          console.log(error);
          ld.loading = false;
        });


      var vm = new Vue({
        el: '#app',
        data: ld,
        methods: {
          fmt: function (time) {
            var date = new Date();
            date.setTime(time);
            return moment(date.toISOString()).fromNow();
          },
          fmt0: function (time) {
            var date = new Date();
            date.setTime(time);
            return date.toLocaleString();
          },
          checkOut: function (id) {
            window.location.href = "/submission/" + id;
          }
        }
      })
    })();

  </script>





</body>

</html>